<template>
  <div class="hello">
     <!-- 整体盒子 -->
    <div class="box">
        <!-- 标题区 -->
        <span class="sectionTitle">
            <span class="ngcontent-c7">地域及可用区</span>
            <ul class="helpLinks">
                <li class="helpItem">
                    <a href="#" target="_blank">如何选择地域</a>
                </li>
            </ul>
        </span>
        <!-- 内容区 -->
        <span class="sectionContent">
            <!-- 地区范围 -->
            <div class="regionSection">
                <!-- 范围按钮 -->
                <div class="region-btn">
                    <!-- 自定义选择地区组件 -->
                    <site-select v-model="selectSite" placeholder="请选择">
                      <site-select-group
                      v-for="(item,i) in fdata" :key=i
                      :label="item.label">
                        <site-select-option
                        v-for="(regionItem,i) in item.Section" :key=i
                        :city="regionItem.Site">
                        </site-select-option>
                      </site-select-group>
                    </site-select>
                    <!-- 可用区按钮 -->
                    <span class="ant-btn">
                        <ul class="btnGroup clearfix">
                            <li class="btn-item">
                                <button class="selectBtn active">随机分配</button>
                            </li>
                            <li class="btn-item">
                                <button class="selectBtn">可用区C</button>
                            </li>
                            <li class="btn-item">
                                <button class="selectBtn">可用区B</button>
                            </li>
                        </ul>
                    </span>
                </div>
                <!-- 内容提示 -->
                <div class="sectionTip">
                    <span class="ngcontent-c11">不同地域的实例之间内网互不相通；选择靠近您客户的地域，可降低网络时延、提高您客户的访问速度。</span>
                </div>
            </div>
        </span>
    </div>
  </div>
</template>

<script>
import SiteSelect from './SiteSelect.vue'
import SiteSelectGroup from './SiteSelectGroup.vue'
import SiteSelectOption from './SiteSelectOption.vue'
export default {
  components: { SiteSelect, SiteSelectGroup, SiteSelectOption },
  name: 'Site',
  created () {
    this.selectSite = this.fdata[0].Section[0].Site
  },
  data () {
    return {
      fdata: [
        {
          label: '亚太',
          Section: [
            {
              id: 0,
              Site: '华北1(青岛)'
            },
            {
              id: 1,
              Site: '华北2(北京)'
            },
            {
              id: 2,
              Site: '华北3(张家口)'
            },
            {
              id: 3,
              Site: '华北4(呼和浩特)'
            },
            {
              id: 4,
              Site: '华北5(乌兰察布)'
            },
            {
              id: 5,
              Site: '华东1(杭州)'
            }
          ]
        },
        {
          label: '欧美',
          Section: [
            {
              id: 0,
              Site: '华北1(青岛)'
            },
            {
              id: 1,
              Site: '华北2(北京)'
            },
            {
              id: 2,
              Site: '华北3(张家口)'
            },
            {
              id: 3,
              Site: '华北4(呼和浩特)'
            },
            {
              id: 4,
              Site: '华北5(乌兰察布)'
            },
            {
              id: 5,
              Site: '华东1(杭州)'
            }
          ]
        }
      ],
      selectSite: '' // 默认应该根据定位决定地域
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
/* 外层盒子 */
.box {
  width: 1632px;
  /* height: 96px; */
  display: flex;
  background-color: #fff;
  margin: 0 auto;
  padding: 20px 24px;
}
/* 标题区域 */
.sectionTitle {
  line-height: 32px;
  width: 160px;
  padding-right: 20px;
}
.ngcontent-c7 {
  font-size: 14px;
}
.helpItem {
  font-size: 12px;
}
.helpItem a {
  color: #787e80;
}
.ngcontent-c11 {
  font-size: 12px;
  line-height: 32px;
  color: #787e80;
}
// .regionSection {
//   line-height: 32px;
// }
.region-btn {
  display: flex;
}
.btnGroup .btn-item {
  float: left;
}
// 按钮样式
.selectBtn {
  min-width: 84px;
  height: 32px;
}
.selectBtn:hover {
  color: #0070cc;
  border-color: #b2d4ef;
}
.selectBtn.active {
  background-color: #d9eaf7;
}
.sectionTitle .helpItem {
  line-height: 1.8;
}
</style>
